const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ClearCommentsWebpackPlugin = require('./src/assets/js/clearCommentsWebpackPlugin')

module.exports = {
  mode: 'none', // 打包模式development、production、none
  entry: './src/index.js', // webpack打包入口文件，相对路径时'./'不能省略
  output: { // webpack打包输出配置，为一个对象
    filename: 'bundle.js', // 输出文件名称
    path: path.join(__dirname, 'dist'), // 输出文件目录，为一个绝对路径
    // publicPath: 'dist/', // 设置静态资源目录，/不能省略
  },
  devtool: 'source-map',
  devServer: {
    // hot: true, // HMR
    hotOnly: true, // 结局hot模式HMR时代码报错自动刷新页面
    contentBase: './public',
    proxy: {
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': '',
        },
        // 不能使用loaclhost:8080作为请求主机名，为true时会以实际代理服务器作为主机名请求
        changeOrigin: true,
      },
    },
  },
  module: { // 配置资源模块加载器
    rules: [
      {
        test: /.md$/,
        use: [
          'html-loader',
          './src/assets/js/md-loader',
        ]
      }, // 自定义解析markdown的loader
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        }, // es6+解析
      },
      // {
      //   test: /.html$/,
      //   use: {
      //     loader: 'html-loader',
      //     options: {
      //       // attrs: ['img:src', 'a:href'], // webpack4用法：默认只解析img:src，其他属性需要配置
      //       sources: { // webpack5用法
      //         list: [
      //           {
      //             tag: 'img',
      //             attribute: 'src',
      //             type: 'src',
      //           },
      //           {
      //             tag: 'a',
      //             attribute: 'href',
      //             type: 'src',
      //           },
      //         ],
      //       },
      //     },
      //   }, // html解析
      // },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
        ], // css解析=>style解析，loader由后向前的顺序解析
      },
      // {
      //   test: /.png$/,
      //   use: 'file-loader', // 文件解析，直接拷贝物理文件
      // },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024, // 限制文件为10KB以下的转换为data-url，超过10KB由file-loader处理
          },
        } // 文件解析，转换成data-url编码
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 自动清除打包文件夹
    new HtmlWebpackPlugin({
      title: 'webpack sample',
      template: './index.html',
    }), // 自动生成html
    // new CopyWebpackPlugin([
    //   'public',
    // ]), // 拷贝文件，webpack4用法，上线前执行的插件
    // new CopyWebpackPlugin({
    //   patterns: [
    //     'public',
    //   ],
    // }), // 拷贝文件，webpack5用法，上线前执行的插件
    new ClearCommentsWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // dev模式处理HMR
  ],
}